<template>
  <div>
    <el-dialog :title="info.title" :visible.sync="info.show">
      <el-form :model="form">
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-select v-model="form.pid" placeholder="--请选择--">
            <el-option label="顶级菜单" :value="0"></el-option>
            <!-- 遍历菜单 -->
             <el-option v-for="item in menu" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth">
             <el-radio v-model="form.type" :label="1">目录</el-radio>
              <el-radio v-model="form.type" :label="2">菜单</el-radio>
        </el-form-item>
         <el-form-item label="菜单图标" :label-width="formLabelWidth" v-if="form.type===1">
          <el-select v-model="form.icon" placeholder="--请选择--">
            <el-option v-for='item in icons' :key="item" :label="item" :value="
            item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单地址" :label-width="formLabelWidth" v-else>
          <el-select v-model="form.url" placeholder="--请选择--">
            <el-option v-for='item in urls' :key="item" :label="item" :value="
            item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
            <el-switch
                v-model="form.status"
                active-color="blue"
                inactive-color="grey" :active-value="1" :inactive-value="2">
              </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm" v-if="info.isAdd">添 加</el-button>
        <el-button type="primary" @click="update" v-else>修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addMenu, oneMenu, updateMenu} from '../../../utils/request'
import {successAlert} from '../../../utils/alert'
import {mapGetters,mapActions} from 'vuex'
export default {
  props:['info'],
  data(){
    return {
      form: {
          pid: 0,//默认是顶级菜单
          title: '',//菜单名称
          icon: '',//图标
          type: 1,//菜单类型  1:目录  2:菜单
          url: '',//菜单地址
          status: 1,//状态  1:正常 2禁用
        },
        formLabelWidth: '120px',
        icons:['el-icon-s-home','el-icon-menu','el-icon-s-flag'],
        urls:['menu','role','manager','cate','spec','goods','member','banner','seckill']
    }
  },
  computed:{
    ...mapGetters({
      "menu":"menu/menu"
    })
  },
  methods:{
    ...mapActions({
      "requestMenu":"menu/menuActions"
    }),
    // 取消弹框
    cancel(){
      this.info.show = false;
      this.form = {
          pid: 0,//默认是顶级菜单
          title: '',//菜单名称
          icon: '',//图标
          type: 1,//菜单类型  1:目录  2:菜单
          url: '',//菜单地址
          status: 1,//状态  1:正常 2禁用
        };
    },
    // 实现添加数据
    confirm(){
      addMenu(this.form).then(res=>{
        successAlert(res.data.msg)
        this.cancel()
        this.requestMenu()
      })
    },
    // 获取详情
    getDetail(id){
      // 发起获取详情请求
      oneMenu({id}).then(res=>{
        this.form = res.data.list;
        this.form.id = id;
      })
    },
    // 修改菜单
    update(){
      updateMenu(this.form).then(res=>{
        successAlert(res.data.msg)
        this.cancel()
        this.requestMenu()
      })
    }
  },
  mounted(){
    this.requestMenu()
  }
}
</script>

<style>

</style>
